<template>
  <div class="box">
    <div style="width:100%;height:50px;"></div>
    <div class="top"></div>
    <div class="main">
      <div class="left">
        <div>
          二维码已过期？<span @click="shuaxin">刷新</span>页面重新获取二维码
        </div>
        <img :src="qrcode" alt="" />
        <span>请使用微信扫一扫完成支付</span>
      </div>
      <!-- <div class="line"></div> -->
      <div class="right">
        <img src="../../../assets/img/wx.png" alt="" />
        <!-- <div class="right-top">铁路12306订单</div>
        <div class="right-price"><span>¥</span>148</div>
        <div class="right-item"><div>收款方</div>中国铁路总公司资金清算中心</div>
        <div class="right-item"><div>下单时间</div>2021-04-28 17:44:55</div>
        <div class="right-item"><div>订单号</div>W2021042856628855</div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Pay",
  data() {
    return {
      open: false,
      qrcode: "",
      orderId: "",
      num: 1
    };
  },
  mounted() {
    this.qrcode =
      this.$baseUrl +
      "/api/wx/toQrPay.jpg?price=" +
      this.$route.query.price +
      "&payNum=" +
      this.$route.query.payNum +
      "&num=" +
      this.num;
    this.getstatus();
  },
  methods: {
    shuaxin() {
      this.num = this.num + 1;
      this.qrcode =
        this.$baseUrl +
        "/api/wx/toQrPay.jpg?price=" +
        this.$route.query.price +
        "&payNum=" +
        this.$route.query.payNum +
        "&num=" +
        this.num;
    },
    getstatus() {
      this.$postRequest("/api/order/getOrderStatus", {
        payNum: this.$route.query.payNum
      }).then(res => {
        console.log(res);
        if (res.data == 1) {
          setTimeout(() => {
            this.getstatus();
          }, 4500);
        } else {
          this.$router.push("/home/conindex/order");
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.box {
  width: 1000px;
  height: 480px;
  margin: 0 auto;
  position: relative;
  border-radius: 4px;
  // background: #f8f9fb;
}
.top {
  width: 158px;
  height: 21px;
  margin-bottom: 50px;
  background-image: url(../../../assets/img/logo_wechatpay.svg), none;
}
.main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.left {
  text-align: center;
}
.left > div {
  font: 14px/1.6 "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei",
    "\9ED1\4F53", Arial, sans-serif;
  color: #353535;
}
.left > div > span {
  color: red;
  cursor: pointer;
}
.left > img {
  display: block;
  width: 208px;
  padding: 0 120px;
  border-right: 1px dashed #d1d1d1;
}
.left > span {
  font: 14px/1.6 "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei",
    "\9ED1\4F53", Arial, sans-serif;
  color: #888888;
}
.right {
  width: 304px;
  font: 14px/1.6 "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei",
    "\9ED1\4F53", Arial, sans-serif;
}
.right > img {
  width: 226px;
  height: 290px;
}
.right-top {
  font-size: 16px;
  margin-bottom: 30px;
}
.right-price {
  font-size: 54px;
  line-height: 1;
  display: inline-block;
  margin-bottom: 39px;
}
.right-price > span {
  font-size: 30px;
  vertical-align: top;
  line-height: 40px;
  display: inline-block;
  margin: -6px 12px 0 0;
}
.right-item {
  width: 100%;
  display: flex;
  align-items: center;
}
.right-item > div {
  width: 80px;
  display: inline-block;
  color: #9a9a9a;
}
</style>